/**
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 *
 * @format
 */

/**
 * CSS files with the .module.css suffix will be treated as CSS modules
 * and scoped locally.
 */

.driver {
  display: flex;
  flex-wrap: nowrap;
  position: fixed;
  width: 100%;
  height: 32px;
  z-index: 1; /* above editors */
  margin: 10px 0px;
  padding: 0px 10px;
  padding-left: 20px;
}

.driver > button,
.driver > input {
  flex-basis: 0;
  flex-shrink: 1;
}

.argsInput {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  flex-grow: 1;
  color: var(--ifm-navbar-search-input-color);
  background-color: var(--ifm-navbar-search-input-background-color);
  border: 1px solid var(--ifm-color-emphasis-500);
  border-radius: 4px;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  min-width: 100px;
  max-width: 300px;
  padding: 10px;
  outline: none;
  font-size: 13px;
  font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;
}

html[data-theme='dark'] .argsInput {
  border: 1px solid var(--ifm-color-emphasis-100);
}

.runBtn {
  padding: 6px 0;
  font-size: 12px;
  margin-left: 0;
  background-color: var(--ifm-navbar-search-input-background-color);
  border: 1px solid var(--ifm-color-emphasis-500);
  border-left: none;
  border-radius: 4px;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  color: var(--ifm-color-primary);
  min-width: 56px;
  text-align: center;
}

.runBtn:hover {
  cursor: pointer;
  background-color: var(--ifm-color-primary);
  color: white;
}

html[data-theme='dark'] .runBtn {
  border: 1px solid var(--ifm-color-emphasis-100);
}

.helpBtn {
  background-color: var(--ifm-navbar-search-input-background-color);
  border: 1px solid var(--ifm-color-emphasis-500);
  border-radius: 4px;
  color: var(--ifm-color-primary);
  text-align: center;
  font-size: var(--ifm-font-size-base);
  margin: 0 10px;
  line-height: 30px;
  min-width: 36px;
}

.helpBtn:hover {
  cursor: pointer;
  background-color: var(--ifm-color-primary);
  color: white;
}

html[data-theme='dark'] .helpBtn {
  border: 1px solid var(--ifm-color-emphasis-100);
}

.elapsed {
  flex-shrink: 0;
  line-height: 32px;
  font-size: 13px;
  font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;
}

.codeContainer {
  display: flex;
  flex-direction: row;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  padding-top: 112px; /* navbar 60 + driver 52 */
}

.sourceCode {
  width: 33.3%;
  min-width: 33.3%;
  height: 100%;
}

.outputCode {
  flex: 1;
  height: 100%;
}

@media screen and (max-width: 768px) {
  .codeContainer {
    flex-direction: column;
  }

  .sourceCode {
    width: 100%;
    height: 33%;
    min-height: 33%;
  }

  .outputCode {
    width: 100%;
  }
}

@media screen and (max-width: 480px) {
  .driver {
    padding-left: 10px;
  }

  .runBtn {
    min-width: 38px;
  }

  .helpBtn {
    margin: 0 6px;
  }
}

/* Reverting global styles conflicts with monaco */
.codeContainer :global(.button),
.codeContainer :global(.button:hover),
.codeContainer :global(.contents),
.codeContainer :global(.contents:hover) {
  transition: inherit;
  color: inherit;
  border: inherit;
  border-radius: inherit;
  outline: inherit;
  padding: inherit;
  margin: inherit;
}
